<template>
  <div class="list-demo">
    <van-pull-refresh v-model="status.refreshing" @refresh="reloadList">
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item v-model="form.auditType" :options="auditList" @change="handleAuditTypeChange" />
      </van-dropdown-menu>
      <div class="action">
        <van-button size="small" icon="plus" type="primary" @click="handleAdd">新增</van-button>
        <Search v-model="form.search" @search="onSearch" @clear="onCancel" />
      </div>
      <List
        id="list"
        v-model:loading="status.loading"
        v-model:error="status.error"
        :finished="status.finished"
        @load="loadList"
      >
        <CollapseJoinTransition class-name="transition-content">
          <div v-for="(item, index) of list" :key="item.xm" class="card" :data-index="index">
            <div
              class="status is-vertical"
              :class="[fmtDict(item.auditStatus, store.state.dict['audit_status'], 'cssClass')]"
            ></div>
            <div class="card_title">
              {{ item.xm }}
              <van-tag plain type="primary">{{ fmtDict(item.gender, store.state.dict['sys_user_sex']) }}</van-tag>
            </div>
            <div class="card_info">
              <div class="info">
                <label class="info_label">手机号码</label>
                <span class="info_content">{{ item.phone }}</span>
              </div>
              <div class="info">
                <label class="info_label">身份证号</label>
                <span class="info_content">{{ item.sfhm }}</span>
              </div>
              <div class="info">
                <label class="info_label">住址</label>
                <span class="info_content">{{ item.zz }}</span>
              </div>
            </div>
            <div class="card_action">
              <div class="action_btn" @click.stop="handleDetail(item.id)">详情</div>
              <div class="action_btn" @click.stop="handleAudit(item.id)">审核</div>
            </div>
          </div>
        </CollapseJoinTransition>
      </List>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts">
export default {
  name: 'CrudListDemo'
}
</script>

<script setup lang="ts">
import { onMounted, onActivated, onDeactivated, reactive } from 'vue'
import useSearch from '@/hook/use-search'
import useList from '@/hook/use-list'
import useCacheScrollTop from '@/hook/use-cache-scroll-top'
import { loadUserList } from '@/api/demo'
import CollapseJoinTransition from '@/components/CollapseJoinTransition/CollapseJoinTransition.vue'
import List from '@/components/Base/list.vue'
import Search from '@/components/Base/search.vue'
import { useRouter } from 'vue-router'
import { fmtDict } from '@/utils/filter'
import { useStore } from '@/store/index'

const router = useRouter()

const store = useStore()

const auditList = [
  { text: '全部审核', value: 0 },
  { text: '已审核', value: 1 },
  { text: '未审核', value: 2 }
]

const createForm = () => ({
  search: '',
  auditType: 0
})

const form = reactive(createForm())

// 列表相关
const { loadList, reloadList, list, status } = useList(form, loadUserList)

// 搜索框相关
const { onSearch, onCancel } = useSearch(form.search, reloadList)

// 缓存列表滚动条位置相关
const { setScrollTop, cacheScrollTop } = useCacheScrollTop('#list')

// 切换查询条件
const handleAuditTypeChange = () => {
  reloadList()
}

// 跳转新增页面
const handleAdd = () => {
  router.push('/demo/crud/add')
}

// 跳转详情页面
const handleDetail = (id: string) => {
  router.push(`/demo/crud/detail?id=${id}`)
}

// 跳转审核页面
const handleAudit = (id: string) => {
  router.push(`/demo/crud/audit?id=${id}`)
}

onMounted(() => {
  loadList()
})

// 进入缓存页面触发
onActivated(() => {
  // 复原滚动条位置
  setScrollTop()
})

// 从缓存页面离开触发
onDeactivated(() => {
  // 缓存滚动条位置
  cacheScrollTop()
})
</script>
<style lang="scss" scoped>
@import '@/styles/form.scss';
$search-height: 54px;
$dropdown-height: 48px;
$main-margin: 15px;

.action {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding-left: 10px;
  .van-search {
    flex: 1;
  }
}

.van-list {
  margin-top: $main-margin;
  height: calc(100vh - #{$search-height} - #{$main-margin} - #{$dropdown-height});
  overflow-y: auto;
  .card {
    margin: 0 $main-margin;
  }
}

.card + .card {
  margin-top: $main-margin;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  @include status-watermark;
  .card_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    border-radius: 5px 5px 0px 0px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: bold;
    span {
      font-size: 14px;
    }
    &.primary {
      background: linear-gradient(90deg, rgba(25, 185, 77, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      span {
        color: #19b94d;
      }
    }
    &.info {
      background: linear-gradient(90deg, rgba(42, 115, 236, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      span {
        color: #2a73ec;
      }
    }
  }
  .card_info {
    flex: 1;
    padding: 0 15px;
    .info {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 20px;
      label {
        min-width: 70px;
        &::after {
          content: '：';
        }
      }
      span {
        @include beyond-line-break;
      }
      &:last-of-type {
        margin-bottom: 10px;
      }
    }
    & > {
      * + * {
        margin-top: 10px;
      }
    }
  }
  .card_action {
    display: flex;
    border-top: 1px solid #eee;
    .action_btn {
      flex: 1;
      padding: 8px 0;
      text-align: center;
      font-size: 14px;
      color: #1989fa;
      transition: background-color 0.3s;
      &:active {
        background-color: rgb(240, 240, 240);
      }
    }
  }
}
</style>
